<template>
  <view>
    <view class="form re">
      <view class="form-item">
        <view class="label">
          <view class="head">账号</view>
          <input type="text" v-model="userData.username" disabled placeholder="请输入手机号" class="input-box" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">密码</view>
          <input type="text" v-model="userData.passwd" disabled placeholder="请输入密码" class="input-box" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">名称</view>
          <input type="text" v-model="userData.nickname" placeholder="请输入名称" class="input-box" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">行业</view>
          <picker class="input-box" :value="index" :range="pickerArr" @change="bindPickerChange">
            <view>{{ pickerArr[index] }}</view>
          </picker>
        </view>
      </view>
      <view class="form-item" @click="chooseCity">
        <view class="label">
          <view class="head">地区</view>
          <input type="text" v-model="userData.region" placeholder="请输入地区" class="input-box" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">邀请码</view>
          <input type="text" v-model="userData.inviteCode" placeholder="若朋友推荐(选择)" class="input-box" />
        </view>
      </view>
      
      <view class="btn" @tap="doReg">确定</view>
    </view>
    <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="userData.cityPickerValue" @onConfirm="onConfirm"></mpvue-city-picker>
  </view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
  components: {
    mpvueCityPicker
  },
  data() {
    return {
      phoneNumber: '',
      code: '',
      passwd: '',
      getCodeText: '获取验证码',
      getCodeBtnColor: '#be9d6b',
      getCodeisWaiting: false,
      index: '0',
      pickerArr: ['教育', '电商', '工业', '个人'],
      userData: {
        username: 'Ooas',
        passwd: '23',
        nickname: '',
        industry: '教育',
        inviteCode: '',
        region: '北京市-市辖区-东城区',
        cityPickerValue: [0, 0, 0],
        inviteCode: '',
      }
    };
  },
  onLoad() {},
  methods: {
    bindPickerChange: function(e) {
      this.index = e.target.value;
      this.userData.industry = this.pickerArr[this.index];
    },
    chooseCity() {
    	this.$refs.mpvueCityPicker.show()
    },
    onConfirm(e) {
      this.userData.region = e.label;
      this.userData.cityPickerValue = e.value;
    },
    doReg() {
      uni.hideKeyboard();
      //模板示例部分验证规则
      // if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
      // 	uni.showToast({ title: '请填写正确手机号码', icon: 'none' });
      // 	return false;
      // }
      
      uni.showLoading({
        title: '提交中...'
      });
      //模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
      setTimeout(() => {
        uni.getStorage({
          key: 'UserList',
          success: res => {
            //增加记录，密码md5
            res.data.push(this.userData);
            uni.setStorage({
              key: 'UserList',
              data: res.data,
              success: function() {
                uni.hideLoading();
                uni.showToast({ title: '注册成功', icon: 'success' });
                setTimeout(function() {
                  uni.navigateTo({
                    url: '/pages/login/registerOrder'
                  });
                }, 1000);
              }
            });
          },
          fail: e => {}
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
@import '../../static/css/login.scss';
.form-item {
  display: flex;
  align-items: center;
  width: 100%;
  .label {
    padding: 10rpx;
    flex-grow: 1;
    .head {
      font-size: 36rpx;
    }
    .input-box {
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 1rpx solid #e6e6e6;
    }
  }
  .codeImg {
    width: 200rpx;
    height: 100rpx;
    text-align: center;
    .getCode {
      margin-top: 50rpx;
    }
  }
}
</style>
